<template>
  <div class="add-subject">
    <el-dialog :title="`${showText}学科`" :visible.sync="showDialog" @close="btnCancel()">
      <el-form ref="addForm" :model="formData" :rules="rules">
        <!-- 学科名称 -->
        <el-form-item label="学科名称" prop="subject_name">
          <el-input v-model="formData.subject_name" style="width:70%" placeholder="请输入学科名称" />
        </el-form-item>
        <!-- 排序 -->
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="1" size="medium"></el-input-number>
        </el-form-item>
        <!-- 是否显示 -->
        <el-form-item label="是否显示" prop="is_show">
          <el-switch
            v-model="formData.is_show"
            :active-value="1"
            :inactive-value = "2"
            active-text="是"
            inactive-text="否">
          </el-switch>
        </el-form-item>
        <!-- 学科图标 -->
        <el-form-item label="学科图标" prop="subject_icon">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :file-list="fileList"
            :on-remove="onRemove"
            :on-preview="onPreview"
            :on-change="onChange"
            :class="{ hidden: fileComputed }"
          >
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="formData.subject_icon=file.url" alt=""
                >
            </div>  
          </el-upload>
          <!-- 预览图片 -->
          <el-dialog :visible.sync="dialogVisible">
            <img style="width: 100%" :src="formData.subject_icon" alt="">
          </el-dialog>
          <span class="suggest">建议尺寸：200*200</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addSubject,getSubject,editSubject,uploadIcon} from '@/api/subject'
export default {
  name: 'addSubject',
  components: {
  },
  data () {
    return {
      showDialog:false,
      formData:{
        sort:10,
        id:'',
        is_show:2
      },
      formImgData:{},
      imgUrl: "",
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      rules:{
        subject_name:[{required: true, message: '请输入学科名称', trigger: 'blur'}],
        sort:[{required: true, trigger: 'blur'}],
        is_show:[{required: true, trigger: 'blur'}]
      }
    }
  },
  computed: {
    fileComputed() {
      return this.fileList.length === 1;
    },
    showText(){
      return this.formData.id ? '修改':'添加'
    }
  },
  methods: {
    //  获取学科信息
    async getSubject(id){
      const data = await getSubject(id)
      this.formData = data
      // console.log(data);
      this.fileList.push({status:'success',url:'http://122.51.249.55:7005/'+data.subject_icon})
    },
    //  预览图标
    onPreview(file) {
      this.imgUrl = file.url;
      this.dialogVisible = true;
    },
    //  改变图标时
    async onChange(file,fileList) {
      this.fileList = fileList.map((item) => item);
      this.formImgData = new FormData()
      this.formImgData.append('file',file.raw)
      const data = await uploadIcon(this.formImgData)
      this.formData.subject_icon = data.url
    },
    //  删除图标
    onRemove(val) {
      this.fileList = this.fileList.filter((item) => item.uid !== val.uid);
    },
    //  添加/编辑学科
    async addSubject(){
      try {
        await this.$refs.addForm.validate()
        if(this.formData.id) {
          await editSubject(this.formData)
        } else {
          await addSubject(this.formData)
        }
        this.$message.success(this.formData.id? '修改成功':'添加成功')
        this.btnCancel()
        this.$emit('update')
      } catch (error) {
      }
    },
    //  关闭弹层
    btnCancel(){
      this.$refs.addForm.resetFields()
      this.showDialog = false
      this.formData = {sort:10,is_show:2}
      this.fileList = []
    }
  }
}
</script>
<style lang="scss" scoped>
  .add-subject {
    ::v-deep .el-dialog {
      width: 40%;
    }
    ::v-deep .el-dialog__header {
      border-bottom: 1px solid #e9ecef;
    }
    ::v-deep .el-form-item__label {
      width: 128px;
    }
    ::v-deep .el-upload {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
    ::v-deep .el-upload-list__item {
      width: 100px;
      height: 100px;
    }
    .suggest {
      padding-left: 128px;
    }
    ::v-deep .el-form-item__error {
      padding-left: 128px;
    }
    .hidden {
      height: 100px;
      ::v-deep .el-upload--picture-card {
        display: none;
      }
    }
  }
</style>